<template>
  <div>
    <table :class="$style.table">
      <tbody :class="$style.tbody">
        <tr>
          <td :class="$style.title" :colspan="5 + sizeModel.length">
            线稿图及尺寸表（部位名称配置固定值，可下拉选择自定义修改）
          </td>
        </tr>
        <tr>
          <th rowspan="1000" :class="[$style.labelTitle, $style.imgPreview]">
            线稿图：<img
              :class="$style.lineImg"
              :src="ossUrl || cupsheImg"
              alt=""
            />
          </th>

          <th :class="$style.labelTitle">代号</th>
          <th :class="[$style.size, $style.labelTitle]">
            <span :class="$style.leftTitle">部位</span>
            <span :class="$style.line" />
            <span :class="$style.rightTitle">尺寸</span>
          </th>

          <th
            v-for="(size, index) in sizeModel"
            :key="index"
            :class="$style.labelTitle"
            v-text="size"
          />
          <th :class="$style.labelTitle">跳档码</th>
          <th :class="$style.labelTitle">公差</th>
        </tr>

        <tr v-for="(item, index) in craftBaseSize" :key="index">
          <td :class="$style.value">
            {{ item.positioncode }}
          </td>
          <td :class="$style.value">
            {{ item.position }}
          </td>

          <td
            v-for="(sizeDescItem, sizeDescIndex) in item.sizeDesc.split(',')"
            :key="sizeDescIndex"
            :class="$style.value"
          >
            {{ sizeDescItem }}
          </td>
          <td :class="$style.value">
            {{ item.randomValue }}
          </td>
          <td :class="$style.value">
            {{ item.tolerance }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    craftId: {
      type: Number,
      default: -1
    },
    bizScene: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      craftBaseSize: [],
      sizeModel: [],
      ossUrl: ''
    }
  },
  mounted() {
    this.getCraftBaseSizeInfo()
    this.getImageList()
  },
  methods: {
    async getImageList(bizType = 35) {
      try {
        const res = await this.$api.oss.list({
          bizId: this.$route.query.productId,
          bizScene: 110,
          //  this.bizScene,
          bizType
        })
        console.log(res)
        if (res && res.list && res.list[0]) {
          this.ossUrl = res.list[0].ossUrl
        }
      } catch (e) {
        console.error(e)
      }
    },
    async getCraftBaseSizeInfo() {
      try {
        const res = await this.$api.craft.craftBaseSize({
          craftId: this.craftId
        })

        this.sizeModel = res.sizeModel.split(',')
        this.craftBaseSize = res.list
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style lang="less" module>
@import './style.less';
.tbody {
  .size {
    position: relative;
    height: 42px;
    width: 150px;
    overflow: hidden;
    .leftTitle {
      position: absolute;
      left: 25px;
      bottom: 0;
    }

    .rightTitle {
      position: absolute;
      right: 25px;
      top: 0;
    }

    .line {
      right: 0;
      bottom: 0;
      height: 1px;
      width: 500px;
      display: inline-block;
      background-color: #eee;
      position: absolute;
      transform-origin: bottom right;
      transform: rotate(15deg);
    }
  }

  .imgPreview {
    width: 30%;
  }
}
.lineImg {
  width: 100px;
  height: 120px;
  object-fit: cover;
}
</style>
